/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import RegionGroup from '../../../components/RegionGroup';
import {getParams, request} from '../../../globalLib';
import {ConfigProvider, Field, Form, Grid, Input, Loading, Pagination, Select, Table,} from '@alifd/next';

import './index.scss';

const FormItem = Form.Item;
const {Row, Col} = Grid;

@ConfigProvider.config
class ListeningToQuery extends React.Component {
    static displayName = 'ListeningToQuery';

    static propTypes = {
        locale: PropTypes.object,
    };

    constructor(props) {
        super(props);
        this.state = {
            value: '',
            visible: false,
            loading: false,
            total: 0,
            pageSize: 10,
            currentPage: 1,
            dataSource: [],
        };
        this.field = new Field(this);
        this.group = getParams('group') || '';
        this.dataId = getParams('dataId') || '';
        this.serverId = getParams('serverId') || '';
        this.tenant = getParams('namespace') || '';
    }

    componentDidMount() {
        this.field.setValue('type', 0);
        this.field.setValue('group', this.group);
        this.field.setValue('dataId', this.dataId);
    }

    onSearch() {
    }

    onChange() {
    }

    openLoading() {
        this.setState({
            loading: true,
        });
    }

    closeLoading() {
        this.setState({
            loading: false,
        });
    }

    queryTrackQuery = () => {
        const self = this;
        let queryUrl = '';
        const type = this.getValue('type');
        if (type === 1) {
            const ip = this.getValue('ip');
            queryUrl = `v1/cs/listener?ip=${ip}`;
            const tenant = window.nownamespace || getParams('namespace') || '';
            if (tenant) {
                queryUrl += `&tenant=${tenant}`;
            }
        } else {
            const dataId = this.getValue('dataId');
            const group = this.getValue('group');
            if (!dataId || !group) return false;
            queryUrl = `v1/cs/configs/listener?dataId=${dataId}&group=${group}`;
        }
        request({
            url: queryUrl,
            beforeSend() {
                self.openLoading();
            },
            success(data) {
                if (data.collectStatus === 200) {
                    const dataSoureTmp = [];
                    const status = data.lisentersGroupkeyStatus;
                    for (const key in status) {
                        if (type === 1) {
                            const obj = {};
                            let [dataId, group] = key.split('+');
                            obj.dataId = dataId;
                            obj.group = group;
                            obj.md5 = status[key];
                            dataSoureTmp.push(obj);
                        } else {
                            const obj = {};
                            obj.ip = key;
                            obj.md5 = status[key];
                            dataSoureTmp.push(obj);
                        }
                    }
                    self.setState({
                        dataSource: dataSoureTmp || [],
                        total: dataSoureTmp.length || 0,
                    });
                }
            },
            complete() {
                self.closeLoading();
            },
        });
    };

    showMore() {
    }

    changePage = value => {
        this.setState({
            currentPage: value,
        });
    };

    resetSearch() {
        this.field.reset();
        this.forceUpdate();
    }

    renderStatus(values, index, record) {
        const {locale = {}} = this.props;
        return (
            < div >
            {
                record.pushStatus === true ? (
                    < span style = {
        {
            color: 'green'
        }
    }>
        {
            locale.success
        }
    <
        /span>
    ) :
        (
        < span
        style = {
        {
            color: 'red'
        }
    }>
        {
            locale.failure
        }
    <
        /span>
    )
    }
    <
        /div>
    )
        ;
    }

    getQueryLater = () => {
        setTimeout(() => {
            // 子组件可能优先于父组件所以延迟执行
            this.queryTrackQuery();
        });
    };

    render() {
        const {locale = {}} = this.props;
        const {init, getValue} = this.field;
        this.init = init;
        this.getValue = getValue;

        const selectDataSource = [
            {
                label: locale.configuration,
                value: 0,
            },
            {
                label: 'IP',
                value: 1,
            },
        ];
        return (
            < div
        style = {
        {
            padding: 10
        }
    }>
    <
        Loading
        shape = "flower"
        style = {
        {
            position: 'relative'
        }
    }
        visible = {this.state.loading}
        tip = "Loading..."
        color = "#333"
            >
            < RegionGroup
        left = {locale.listenerQuery}
        namespaceCallBack = {this.getQueryLater}
        />
        < Row
        className = "demo-row"
        style = {
        {
            marginBottom: 10, padding
        :
            0
        }
    }>
    <
        Col
        span = "24" >
            < Form
        inline
        field = {this.field} >
            < FormItem
        label = {`${locale.queryDimension}:`
    }>
    <
        Select
        dataSource = {selectDataSource}
        style = {
        {
            width: 200
        }
    }
        {...
            this.init('type')
        }
        />
        < /FormItem>
        < FormItem
        label = "Data ID:"
        style = {
        {
            display: this.getValue('type') === 0 ? '' : 'none',
        }
    }
        required
        >
        < Input
        placeholder = {locale.pleaseEnterTheDataId}
        style = {
        {
            width: 200
        }
    }
        {...
            this.init('dataId', {
                rules: [
                    {
                        required: true,
                        message: locale.dataIdCanNotBeEmpty,
                    },
                ],
            })
        }
        />
        < /FormItem>
        < FormItem
        label = "Group:"
        style = {
        {
            display: this.getValue('type') === 0 ? '' : 'none',
        }
    }
        required
        >
        < Input
        placeholder = {locale.pleaseInputGroup}
        style = {
        {
            width: 200
        }
    }
        {...
            this.init('group', {
                rules: [
                    {
                        required: true,
                        message: locale.groupCanNotBeEmpty,
                    },
                ],
            })
        }
        />
        < /FormItem>
        < FormItem
        label = "IP:"
        style = {
        {
            display: this.getValue('type') === 0 ? 'none' : '',
        }
    }
    >
    <
        Input
        placeholder = {locale.pleaseInputIp}
        style = {
        {
            width: 200, boxSize
        :
            'border-box'
        }
    }
        {...
            this.init('ip')
        }
        />
        < /FormItem>
        < FormItem
        label = "" >
            < Form.Submit
        validate
        type = "primary"
        onClick = {this.queryTrackQuery}
        style = {
        {
            marginRight: 10
        }
    }
    >
        {
            locale.query
        }
    <
        /Form.Submit>
        < /FormItem>
        < /Form>
        < /Col>
        < /Row>
        < div
        style = {
        {
            position: 'relative'
        }
    }>
    <
        h3
        style = {
        {
            height: 28,
                lineHeight
        :
            '28px',
                paddingLeft
        :
            10,
                borderLeft
        :
            '3px solid #09c',
                margin
        :
            0,
                marginBottom
        :
            10,
                fontSize
        :
            16,
        }
    }
    >
        {
            locale.queryResultsQuery
        }
    <
        strong
        style = {
        {
            fontWeight: 'bold'
        }
    }>
        {
            this.state.total
        }
    <
        /strong>
        {
            locale.articleMeetRequirementsConfiguration
        }
    <
        /h3>
        < /div>
        < Row
        style = {
        {
            padding: 0
        }
    }>
    <
        Col
        span = "24"
        style = {
        {
            padding: 0
        }
    }>
        {
            this.getValue('type') === 1 ? (
                < Table
                dataSource = {this.state.dataSource}
            fixedHeader
            maxBodyHeight = {500}
            locale = {
            {
                empty: locale.pubNoData
            }
        }
        >
        <
            Table.Column
            title = "Data ID"
            dataIndex = "dataId" / >
                < Table.Column
            title = "Group"
            dataIndex = "group" / >
                < Table.Column
            title = "MD5"
            dataIndex = "md5" / >
                < /Table>
        ) :
            (
            < Table
            dataSource = {this.state.dataSource}
            fixedHeader
            maxBodyHeight = {400}
            locale = {
            {
                empty: locale.pubNoData
            }
        }
        >
        <
            Table.Column
            title = "IP"
            dataIndex = "ip" / >
                < Table.Column
            title = "MD5"
            dataIndex = "md5" / >
                < /Table>
        )
        }
    <
        /Col>
        < /Row>
        < div
        style = {
        {
            marginTop: 10, textAlign
        :
            'right'
        }
    }>
    <
        Pagination
        current = {this.state.currentPage}
        total = {this.state.total}
        pageSize = {this.state.pageSize}
        onChange = {this.changePage}
        />
            ,
    <
        /div>
        < /Loading>
        < /div>
    )
        ;
    }
}

export default ListeningToQuery;
